<template>
  <div class="comment">
    <van-nav-bar
      title="评论"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 选择按钮 -->
    <div class="comment_make">
      <div class="make comment_button">
        <van-button round size="small" type="default">全部</van-button>
        <van-button round size="small" type="default">全部</van-button>
        <van-button round size="small" type="default">全部</van-button>
      </div>
      <div class="make comment_praise">
        <div class="comment_degree">好评度</div>
        <div class="comment_num">99%</div>
      </div>
    </div>
    <!-- 评论 -->
    <div class="comment_evaluate">
      <!-- 头像、用户名 -->
      <div class="comment_head">
        <!-- 头像 -->
        <van-image round src="https://img.yzcdn.cn/vant/cat.jpeg" />
        <!-- 用户名 -->
        <span class="head_name">用户名</span>
        <!-- G5 -->
        <span class="head_g">
          <img src="http://gfs11.gomein.net.cn/T1BqbgBCLT1RCvBVdK.png" alt="">
        </span>
        <!-- 评分 -->
        <van-rate :size="10" v-model="value" />
        <!-- 年月日 -->
        <span class="head_date">2019-10-20</span>
      </div>
      <!-- 评论内容 -->
      <div class="comment_content">评论内容</div>
      <!-- 规格 -->
      <div class="comment_norms">规格</div>
    </div>
    <div class="comment_evaluate">
      <!-- 头像、用户名 -->
      <div class="comment_head">
        <!-- 头像 -->
        <van-image round src="https://img.yzcdn.cn/vant/cat.jpeg" />
        <!-- 用户名 -->
        <span class="head_name">用户名</span>
        <!-- G5 -->
        <span class="head_g">G5</span>
        <!-- 评分 -->
        <van-rate :size="10" v-model="value" />
        <!-- 年月日 -->
        <span class="head_date">2019-10-20</span>
      </div>
      <!-- 评论内容 -->
      <div class="comment_content">评论内容</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: 3
    }
  }
}
</script>

<style lang='less'>
.van-tabs {
  width: 100px;
}

.comment_make {
  background-color: #ffffff;
  padding: 15px;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

.make {
  display: inline-block;
  vertical-align: middle;
}

.comment_button {
  width: 83%;
}

.comment_button .van-button {
  margin: 5px;
  background-color: #ffe4ed;
}

.comment_praise {
  width: 17%;
}

.comment_degree {
  color: #666666;
  font-size: 12px;
}

.comment_evaluate {
  padding: 15px;
  background-color: #ffffff;
  margin-bottom: 10px;
}

.comment_num {
  color: #f20c59;
  font-size: 22px;
}
/* 头像、用户名 */
.comment_head .van-image {
  width: 35px;
  height: 35px;
}

.comment_head .head_name {
  font-size: 16px;
  color: #262c32;
  margin-left: 5px;
  margin-right: 5px;
}

.comment_head .head_g {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.comment_head .head_g > img {
  width: 20px;
  height: 20px;
}

.comment_head .head_date {
  color: #919599;
  font-size: 12px;
  margin-left: 31%;
}
/* 评论内容 */
.comment_content {
  font-size: 14px;
  padding-top: 15px;
  padding-bottom: 15px;
}
</style>
